<template>
	<view class="container">
		<!-- 卡片式列表 -->
		<view class="card">
			<view class="card-header">供应商信息</view>
			<view class="card-content">
				<view class="info-item">
					<text class="label">编号：</text>
					<text class="value">13</text>
				</view>
				<view class="info-item">
					<text class="label">供应商名称：</text>
					<text class="value">浙江温州皮革厂</text>
				</view>
				<view class="info-item">
					<text class="label">公司电话：</text>
					<text class="value">19823087783</text>
				</view>
				<view class="info-item">
					<text class="label">公司地址：</text>
					<text class="value">浙江省</text>
				</view>
				<view class="info-item">
					<text class="label">联系人：</text>
					<text class="value">黄鹤</text>
				</view>
				<view class="info-item">
					<text class="label">联系电话：</text>
					<text class="value">19723037798</text>
				</view>
				<view class="info-item">
					<text class="label">开户银行：</text>
					<text class="value">浙江省人民公社银行</text>
				</view>
				<view class="info-item">
					<text class="label">税号：</text>
					<text class="value">浙江温州皮革厂</text>
				</view>
				<view class="info-item">
					<text class="label">供应商分类：</text>
					<text class="value">浙江温州皮革厂</text>
				</view>
				<view class="info-item">
					<text class="label">供应商等级：</text>
					<text class="value">高</text>
				</view>
				<view class="info-item">
					<text class="label">审核意见：</text>
					<text class="value">(未填写)</text>
				</view>
			</view>
		</view>

		<!-- 环保提示 -->
		<view class="eco-tip">
			<text>🌿 绿色供应链，助力碳中和 🌿</text>
		</view>

		<!-- 操作按钮 -->
		<view class="action-buttons">
			<button class="action-button success" @click="open1">
				<text>✅ 通过</text>
			</button>
			<button class="action-button error" @click="open2">
				<text>❌ 驳回</text>
			</button>
			<button class="action-button warning" @click="Back">
				<text>🔙 返回</text>
			</button>
		</view>

		<!-- 弹窗 -->
		<uni-popup ref="Ropen1" type="dialog">
			<uni-popup-dialog type="success" cancelText="取消" confirmText="确定" title="通知" content="您真的要通过该项吗？"
				@confirm="dialogConfirm" @close="dialogClose"></uni-popup-dialog>
		</uni-popup>
		<uni-popup ref="Ropen2" type="dialog">
			<uni-popup-dialog type="error" cancelText="关闭" confirmText="同意" title="通知" content="您真的要驳回该项吗？"
				@confirm="dialogConfirm" @close="dialogClose"></uni-popup-dialog>
		</uni-popup>
	</view>
</template>

<script setup>
	import {
		getCurrentInstance
	} from 'vue';

	const {
		proxy
	} = getCurrentInstance();

	// 打开通过弹窗
	const open1 = () => {
		proxy.$refs.Ropen1.open('center');
	};

	// 打开驳回弹窗
	const open2 = () => {
		proxy.$refs.Ropen2.open('center');
	};

	// 返回上一页
	const Back = () => {
		uni.navigateBack({
			delta: 1
		});
	};

	// 弹窗确认事件
	const dialogConfirm = () => {
		uni.showToast({
			title: '操作成功',
			icon: 'success',
		});
	};

	// 弹窗关闭事件
	const dialogClose = () => {
		console.log('弹窗已关闭');
	};
</script>

<style>
	/* 容器样式 */
	.container {
		height: 100%;
		padding: 20px;
		background: #e8f5e9;
		/* 双碳主题浅绿色背景 */
	}

	/* 卡片样式 */
	.card {
		background: #ffffff;
		border-radius: 12px;
		box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
		padding: 20px;
		margin-bottom: 20px;
	}

	.card-header {
		font-size: 18px;
		font-weight: bold;
		color: #00796b;
		/* 双碳主题深绿色标题 */
		margin-bottom: 10px;
		text-align: center;
	}

	.card-content {
		display: flex;
		flex-direction: column;
		gap: 10px;
	}

	.info-item {
		display: flex;
		align-items: center;
		font-size: 14px;
	}

	.label {
		font-weight: bold;
		min-width: 120px;
		color: #004d40;
		/* 双碳主题深绿色标签 */
	}

	.value {
		color: #333;
	}

	/* 环保提示样式 */
	.eco-tip {
		font-size: 14px;
		color: #00796b;
		/* 双碳主题深绿色提示 */
		text-align: center;
		margin-top: 20px;
	}

	/* 操作按钮样式 */
	.action-buttons {
		display: flex;
		justify-content: center;
		gap: 16px;
		margin-top: 20px;
	}

	.action-button {
		border: none;
		outline: none;
		padding: 10px 20px;
		border-radius: 8px;
		font-size: 16px;
		font-weight: 500;
		color: white;
		cursor: pointer;
		transition: all 0.3s ease;
	}

	.success {
		background-color: #00796b;
		/* 双碳主题绿色按钮 */
	}

	.success:hover {
		background-color: #005c4e;
	}

	.error {
		background-color: #d32f2f;
		/* 双碳主题红色按钮 */
	}

	.error:hover {
		background-color: #a91414;
	}

	.warning {
		background-color: #ff9800;
		/* 双碳主题橙色按钮 */
	}

	.warning:hover {
		background-color: #c66700;
	}
</style>